<template>
<!--  折线图-->
<div class="cba">
  <Tabbar><div slot ='center'>本月平均工作时长</div></Tabbar>
  <div ref="chart1" style="width:100%;height:300px"></div>
</div>


</template>

<script>
import Tabbar from "../common/Tabbar";

export default {
  name: "LineHome",
  components:{
    Tabbar
  },
  props:{
    geWei:{
      type:Array,
      default(){
        return[]
      }
    },
    beiRuan:{
      type:Array,
      default(){
        return[]
      }
    },
    Days:{
      type:String,
      default:""
    }
  },
  data(){
    return{
      message:'230000',
      up:'↑'
}
  },
  mounted() {
    this.getEchartData1();
  },
  computed:{
    //折线图实现用户输入多少天，按照for循环从1遍历出来
    addDate:function (){
      let b=[];
      let c =parseInt(this.Days);
     for(let a=1;a <c+1;a++){
      b.push(String(a))
     }
      return b

    }
  },
  methods: {
    getEchartData1() {
      const chart1 = this.$refs.chart1;
      if (chart1) {
        const myChart1 = this.$echarts.init(chart1);
        const option1 = {
          tooltip: {
            trigger: 'axis'
          },
          legend: {
            textStyle:{
              color:'white'
            }
          },
          xAxis: {
            type: 'category',
            axisLine:{
              lineStyle:{
                color:'white'
              }
            },
            boundaryGap: false,
            // data: ['1', '2', '3', '4', '5', '6', '7','8','9','10','11','12','13','14','15','16','17','18','19','20']
            data:this.addDate
          },
          yAxis: {
            name:'工作时长',
            type: 'value',
            axisLine:{
              lineStyle:{
                color:'white'
              }
            }
            // axisLabel: {
            //   formatter: '{value} °C'
            // }
          },
          series: [
            {
              name: '前端进度' ,
              type: 'line',
              lineStyle:{
                normal:{
                  color:'white'
                }

              },
              data: this.geWei,
              markPoint: {
                data: [
                  { type: 'max', name: 'Max' },
                  { type: 'min', name: 'Min' }
                ]
              },
              // markLine: {
              //   data: [{ type: 'average', name: 'Avg' }]
              // }
            },
            {
              name: '后端进度 ',
              type: 'line',
              lineStyle:{
                normal:{
                  color:'yellow'
                }
              },
              data: this.beiRuan,
              // markPoint: {
              //   data: [{ name: '周最低', value: -2, xAxis: 1, yAxis: -1.5 }]
              // },
              // markLine: {
              //   data: [
              //     { type: 'average', name: 'Avg' },
              //     [
              //       {
              //         symbol: 'none',
              //         x: '90%',
              //         yAxis: 'max'
              //       },
              //       {
              //         symbol: 'circle',
              //         label: {
              //           position: 'start',
              //           formatter: 'Max'
              //         },
              //         type: 'max',
              //         lineStyle:{
              //           normal:{
              //             color:'cyan'
              //           }
              //         },
              //         name: '最高点'
              //       }
              //     ]
              //   ]
              // }
            }
          ]
        };
        //当窗口发送变化的时候，改变图表的大小
        myChart1.setOption(option1);
        window.addEventListener("resize", function () {
          myChart1.resize();
        });
      }
      this.$on("hook:destroyed", () => {
        window.removeEventListener("resize", function () {
          myChart1.resize();
        });
      });
    },
  },
};
</script>
<style scoped>
.cba{
  width: 100%;
  height: 380px;
  border: 1px solid cyan;
  box-shadow: 1px 1px 10px cyan;
}
/*button{*/
/*  background: rgba(255,255,255,0);*/
/*  border: 1px solid white;*/
/*}*/
</style>
